如題 今天要來學習的是 動態切換className 與 style
這是範例

為.box 加上動態 class

:class="{ 'className' : 判斷式}"
如果要動態的調整className，調整判斷式即可

 <div class="box" :class="{'rotate':isTransform,'bgc-blue':boxColor}"></div>
 <button class="btn" @click="isTransform = !isTransform">旋轉物件</button>
 <input type="checkbox" v-model="boxColor"  id="checkbox1"/>
 <label for="checkbox1">變色</label>

 var vm = new Vue({
  el: '#app',
  data:{
    isTransform : false,
    boxColor: false,
  }
})

使用物件寫法

如果要綁定的class很多，不仿使用物件的方式集合起來，管理上也比較清楚。
不能直接使用 - 這做為物件選取的名稱，必須使用中括號[]的方式來選取。

<div class="box" :class="classObject"> </div>
<button class="btn" @click="classObject.rotate = !classObject.rotate">旋轉物件</button>
<input type="checkbox" v-model="classObject['bgc-blue']" value="變色" id="checkbox2"/>
<label for="checkbox2">變色</label>

 var vm = new Vue({
  el: '#app',
  data:{
     classObject :{
      'rotate' : false,
      'bgc-blue' : false,
    },
  }
})

使用陣列寫法

適用於className 長度不確定者

  <div class="box" :class="arrayClass"></div>
  <div class="arrary">
    <input class="form-check-input" type="checkbox" id="checkbox3" v-model="arrayClass" value="bgc-blue"/>
    <label class="form-check-label" for="checkbox3">變色</label>
    <input type="checkbox" v-model="arrayClass" id="checkbox4" value="rotate"/>
    <label for="checkbox4">旋轉</label>
  </div>

 var vm = new Vue({
 el: '#app',
 data:{
    arrayClass:[],
 }
})

綁定行內樣式

:style="{'樣式名稱' : '樣式的值'}"
把 - 轉微駝峰式的寫法(ex: backgroundColor)

<div class="box" :style=" {backgroundColor : '#D6EAF8'}"></div>
  <div class="box" :style="styleObj"></div>
  <div class="box" :style="[styleObj,styleObj2]"></div>

  var vm = new Vue({
  el: '#app',
  data:{
     styleObj: {
      backgroundColor: '#D6EAF8',
      border: '1px solid #000'
    },
    styleObj2: {
      boxShadow: '3px 3px 5px rgba(0, 0, 0 , 0.8)'
    },
  }
})

又平安的度過了一天..